<template>
  <!-- 摄影师上传的照片墙 -->
  <div class="photographerWall-wrap">
    <div class="listContent" v-if="listVisible">
      <div class="photoWallList" v-if="imgList.length > 0">
        <vue-scroll :ops="options" ref="vueScroll">
          <div class="photoItem" v-for="item in imgList" :key="item.id" v-tap="{ methods: previewImg, imgInfo: item }">
            <img :src="item.piclink_small" />
          </div>
        </vue-scroll>
      </div>
      <div class="noUpBox" v-if="imgList.length === 0">
        <img src="@/assets/image/hd2/noUp.png" class="noUp" />
        <div class="noUpTip">暂无图片上传</div>
        <div class="waitUpTip">等待摄影师上传中</div>
      </div>
      <!-- <div class="author publicHvCenter">
        <img src="@/assets/image/defaultHeadImg.png" class="headImg" />
        由摄影师
        <div class="authorName">小悦悦</div>
        上传
      </div> -->
    </div>
    <div class="detailContent" v-else>
      <div class="imgWrap publicHCenter" :style="{ backgroundImage: 'url(' + imgDetail.url + ')' }"></div>
      <div class="btnGroup publicVCenter">
        <div class="downloadBtn publicHvCenter" v-tap="{ methods: downloadImg }" v-if="imgDetail.isPay === '0'">
          下载原图{{ photographerImgPrice }}元/张
        </div>
        <div class="downloadBtn publicHvCenter" v-tap="{ methods: downloadImgFree }" v-if="imgDetail.isPay === '1'">下载原图</div>
        <div class="backBtn publicHvCenter" v-tap="{ methods: handleBack }">返回</div>
      </div>
    </div>
    <div class="previewArea">
      <van-image-preview v-model="previewVisible" :images="previewList" class="previewArea"> </van-image-preview>
    </div>
  </div>
</template>
<script>
import { mapMutations, mapState } from 'vuex';
// import { ImagePreview } from 'vant';
import { getLivePhotoInfo, getLivePhotoDetail, buyLivePhoto } from '@/api/photoWall/photoWall';

const wx = require('weixin-js-sdk');

let toDetailLock = false;
export default {
  name: 'photographerWallIndex',
  data() {
    return {
      options: {
        bar: {
          opacity: 0,
        },
      },
      previewVisible: false,
      listVisible: true,
      imgList: [],
      previewList: [],
      imgDetail: {
        isPay: '0',
        url: '',
        id: '',
      },
    };
  },
  watch: {},
  computed: {
    ...mapState({
      photographerImgPrice: (state) => state.app.photographerImgPrice,
      money: (state) => state.user.money,
    }),
  },
  // components: {
  //   [ImagePreview.Component.name]: ImagePreview.Component,
  // },
  created() {
    toDetailLock = false;
    this.getPhotoList();
  },
  mounted() {},
  methods: {
    ...mapMutations({
      setOrigin: 'app/setOrigin',
    }),
    handleBack() {
      this.listVisible = true;
    },
    previewImg(pObj) {
      console.log(pObj);
      const tmpList1 = [pObj.imgInfo.watermarkUrl_small];
      const tmpList2 = this.imgList
        .filter((item) => {
          return item.id !== pObj.imgInfo.id;
        })
        .map((item) => {
          return item.watermarkUrl_small;
        });
      const tmpList3 = tmpList1.concat(tmpList2);
      // ImagePreview(tmpList3);
      this.previewList = tmpList3;
      this.previewVisible = true;
    },
    toDetail(pObj) {
      if (toDetailLock) {
        return;
      }
      toDetailLock = true;
      console.log(pObj.imgInfo);
      getLivePhotoDetail(pObj.imgInfo.id)
        .then((res) => {
          console.log(res);
          toDetailLock = false;
          this.listVisible = false;
          this.imgDetail.id = pObj.imgInfo.id;
          this.imgDetail.isPay = res.isPay;
          this.imgDetail.url = res.url;
        })
        .catch((err) => {
          toDetailLock = false;
          console.log(err);
        });
    },
    downloadImgFree() {
      this.setOrigin('downloadPhotographerWallImg');
      wx.miniProgram.navigateTo({
        url: `/pages/pay/pay?openId=${this.$store.state.user.openId}&userId=${this.$store.state.user.userId}&total=0&origin=${this.$store.state.app.origin}&photographerWallImgPath=${this.imgDetail.url}`,
      });
    },
    downloadImg() {
      this.setOrigin('downloadPhotographerWallImg');
      if (this.photographerImgPrice > this.money) {
        // 喵钻不足需要支付
        const tmpPrice = (this.photographerImgPrice - this.money).toFixed(2);
        wx.miniProgram.navigateTo({
          url: `/pages/pay/pay?openId=${this.$store.state.user.openId}&userId=${this.$store.state.user.userId}&total=${tmpPrice}&origin=${this.$store.state.app.origin}&photographerWallImgPath=${this.imgDetail.url}&photographerWallImgId=${this.imgDetail.id}`,
        });
      } else {
        // 喵钻足够 扣除喵钻后跳转下载
        buyLivePhoto(this.imgDetail.id).then((res) => {
          if (res.code === '200') {
            // 更新 用户余额
            this.setUserInfo({
              money: res.balance.balance,
            });
            wx.miniProgram.navigateTo({
              url: `/pages/pay/pay?openId=${this.$store.state.user.openId}&userId=${this.$store.state.user.userId}&total=0&origin=${this.$store.state.app.origin}&photographerWallImgPath=${this.imgDetail.url}`,
            });
          }
        });
      }
    },
    getPhotoList() {
      getLivePhotoInfo()
        .then((res) => {
          console.log(res);
          this.imgList = res.list1;
        })
        .catch((err) => {
          console.log(err);
        });
    },
  },
  beforeDestroy() {},
};
</script>
<style lang="less" scoped>
img {
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;

  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;
}
.photographerWall-wrap {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  .listContent {
    position: relative;
    width: 100vw;
    height: 100vh;
    .photoWallList {
      position: relative;
      width: 100%;
      height: 90%;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      margin-top: 40px;
      .__vuescroll::v-deep {
        .__view {
          display: flex;
          flex-wrap: wrap;
          padding: 0 20px;
          align-content: flex-start;
          .photoItem {
            width: 220px;
            height: 220px;
            border-radius: 24px;
            margin-right: 14px;
            margin-bottom: 14px;
            &:nth-child(3n) {
              margin-right: 0px;
            }
            img {
              width: 100%;
              height: 100%;
              border-radius: 40px;
            }
          }
        }
      }
    }
    .noUpBox {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      .noUp {
        width: 750px;
        height: 1204px;
        position: absolute;
        top: 0;
        left: 0;
      }
      .noUpTip {
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 478px;
        font-size: 28px;
        color: #999999;
      }
      .waitUpTip {
        width: 100%;
        text-align: center;
        position: absolute;
        bottom: 478px;
        font-size: 28px;
        color: #333333;
        bottom: 74px;
      }
    }
    .author {
      position: absolute;
      bottom: 60px;
      font-size: 24px;
      color: #000;
      width: 100%;
      .headImg {
        width: 44px;
        height: 44px;
        border-radius: 50%;
        margin-right: 4px;
      }
      .authorName {
        color: #fdb64a;
        margin: 0 4px;
      }
    }
  }
  .detailContent {
    position: relative;
    width: 100vw;
    height: 80%;
    .imgWrap {
      margin: 0 auto;
      margin-top: 32px;
      width: 686px;
      height: 100%;
      background-size: 100% 100%;
      background-repeat: no-repeat;
      background-position: 50% 50%;
      border-radius: 40px;
      pointer-events: none;
    }
    .btnGroup {
      width: 100%;
      position: fixed;
      bottom: 20px;
      flex-direction: column;
      .downloadBtn {
        width: 338px;
        height: 78px;
        background: linear-gradient(102deg, #f6c232, #fba427 100%);
        border-radius: 8px;
        font-size: 28px;
        color: #fff;
      }
      .backBtn {
        width: 250px;
        height: 70px;
        background: linear-gradient(102deg, #f6c232, #fba427 100%);
        border-radius: 8px;
        font-size: 28px;
        color: #fff;
        opacity: 0.8;
        margin-top: 40px;
      }
    }
  }
  .previewArea::v-deep {
    .van-image-preview__overlay {
      background-color: rgba(0, 0, 0, 1);
    }
  }
}
</style>
